<template>
  <div class="toLocaleString">
    <i :style="{color: color,fontSize: fontSizeLeft}">
      {{ moneyMkfs[0] }}<i :style="{fontSize: fontSizeRight}">.{{ moneyMkfs[1] }}
      </i>
    </i>
  </div>
</template>
<script>
export default {
  name: 'ToLocaleString',
  components: {},
  props: {
    money: {
      type: Number,
      default: 96.88
    },
    color: {
      type: String,
      default: '#606266'
    },
    fontSizeLeft: {
      type: String,
      default: '14px'
    },
    fontSizeRight: {
      type: String,
      default: '10px'
    }
  },
  data() {
    return {
      moneyMkfs: null
    }
  },
  computed: {},
  watch: {
    money: {
      handler(v) {
        this.moneyMkfs = v.toLocaleString('zh', {
          style: 'currency',
          currency: 'CNY'
        }).split('.')
      },
      immediate: true
    }
  }
}
</script>

<style scoped lang="scss">
.toLocaleString {
  display: inline-block;
}

i {
  font-style: normal;
}
</style>

